<template>
	<view class="container">
		<view class="search">
			<my-header title="钢材搜索" :showGif="false" :scroll="true" @select="checkoutIron"></my-header>
			<!-- <search  @search="searchIron" :disabled="btnDisable"/> -->
			<view class="the-search">
				<view class="search-input" @click="toToSearch">搜索钢材</view>
				<image src="https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/wave.gif" class="wave-gif" mode=""></image>
			</view>
		</view>
		<scroll-view scroll-y style="height: 450px;">
			<view class="chart">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="chart" id="chart" class="the-chart" disable-scroll=true @touchstart="touchLine" @touchmove="moveLine" @touchend="touchEndLine" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2 +'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
				<!--#endif-->
				<!-- #ifndef MP-ALIPAY -->
				<canvas canvas-id="chart" id="chart" class="the-chart" disable-scroll=true @touchstart="touchLine" @touchmove="moveLine" @touchend="touchEndLine"></canvas>
				<!-- #endif -->
			</view>
			<view>
				<slider :value="zoomCount" min="5" :max="zoomMax" block-color="#f8f8f8" block-size="18" @changing="sliderMove" @change="sliderMove"/>
			</view>
			<view class="details-card" v-for="(ironObj, i) in infoArr" :key="i">
				<image class="card-header" :src="ironObj.photo !== ''&&ironObj.photo !== null ? ironObj.photo : 'https://zzes-1251916954.cos.ap-shanghai.myqcloud.com/Ocean.jpg'"></image>
				<view class="card-body">
					<view class="card-name">
						<view>{{ironObj.name}}</view>
						<view class="new-price">{{ironObj.new_price}}元/吨</view>
					</view>
					<view class="card-intro">
						<view>{{ironObj.intro}}</view>
					</view>
					<view class="card-footer">
						{{ironObj.updatedAt | formatDate}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script> 
	import MyHeader from '../../components/my-header.vue'
	import { searchIron } from '../../api/api.js'
	import auth from '../mixin/auth'
	import chart from '../mixin/chart'
	
	export default {
		name: 'SearchIndex',
		mixins: [auth, chart],
		data() {
			return {
				btnDisable: false,
				ironName: '螺纹(22mm)',
				current: 0,
				options: null,
				ironObj: {},
				infoArr: []
			}
		},
		components:{
			MyHeader
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			})
			this.getIronData(this.ironName)
		},
		onShow: function () {
			try {
				const name = uni.getStorageSync('ironName');
				if (name&&name!=='') {
					this.ironName = name
					this.getIronData(this.ironName)
					uni.setStorageSync('ironName', '');
				}
			} catch (e) {
				// error
			}
		},
		onShareAppMessage() {
			return {
				title: '钢材信息搜索',
				path: '/pages/index/index'
			}
		},
		methods: {
			/**
			 * 顶部tab点击事件
			 */
			checkoutIron(v) {
				this.getIronData(v.name)
			},
			call(num) {
				uni.makePhoneCall({
					phoneNumber: num
				});
			},
			getIronData(iron) {
				searchIron(iron).then(res => {
					uni.hideLoading()
					if(res.data.code === 500) {
						uni.showToast({
							title: res.data,
							duration: 2000,
							icon: 'none'
						});
					} else {
						let result = res.data
						let dataArr = []
						this.infoArr = result.map(v => {
							let obj = {
								name: '',
								data: []
							}
							obj.name = v.name
							v.old_price.map(d => {
								obj.data.push(d.price)
							})
							dataArr.push(obj)
							return v
						})
						let x = result[0].old_price.map(v => {
							let date = new Date(v.createdAt)
							let myDate = (date.getMonth() + 1) + '-' + date.getDate() 
							return myDate
						})
						this.chartName = result[0].name
						this.xaxis = x
						this.theSeries = dataArr.map(v => {
							return {
								name: `${v.name}价格`,
								data: v.data,
								type: 'line',
								legendShape: 'rect',
								pointShape: 'rect',
								color: '#2fc25b'
							}
						})
						this.initCharts('chart')
					}
				})
				.catch(e => {
					uni.hideLoading()
				})
			},
			
			searchIron(search) {
				this.ironName = search.name
				this.getIronData()
			},
			toToSearch() {
				console.log('tosearch')
				// #ifdef MP-WEIXIN
				if (this.checkAuth()) {
					uni.navigateTo({
						url: '/pages/search/search'
					})
				}
				// #endif
				// #ifndef MP-WEIXIN
				uni.navigateTo({
					url: '/pages/search/search'
				})
				// #endif
			}
		},
		filters: {
			formatDate (v) {
				let date = new Date(v)
				return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDay()
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
	}
	.header {
		background: transparent;
	}
	.the-chart {
		width: 100%;
		height: 500upx;
		display: flex;
		flex: 1;
	}
	.wave-gif {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;  
		height: 100upx;
	}
	.the-search {
		position: relative;
		display: flex;
		justify-content: center;
		height:100rpx;
		padding: 40upx 24upx 54upx;
		background-color: #00BFFF;
		background-repeat: no-repeat;
		background-position-y:39px;

	}
	.the-search .search-input {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		height: 74upx;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		outline: none;
		border-radius: 18upx;
		border: none;
		padding-left: 126upx;
		font-size: 28upx;
		color: #323232;
		background-color: #fff;
		background-image: url();
		background-repeat: no-repeat;
		background-size:54upx 50upx;
		background-position:55upx 13upx;

	}
	.details-card {
      margin: 62upx 89upx;
      border-radius: 1px;
      box-shadow: 0 1px 2px rgba(0,0,0,.3);
      background: #fff;
      color: #333;
    }
    .card-header {
		background-size: cover;
		background-position: 50%;
		height:368upx;
		width:100%;
		color: #f2f2f2;
    }
    .card-body {
      /* padding: 35upx 90upx; */
      line-height: 1.6;
    }
	.card-body .card-name {
		border-bottom: 1upx solid #eee;
		padding:15upx 40upx;
		display: flex;
		justify-content: space-between;
	}
	.card-body .card-intro {
		padding:15upx 40upx;
		min-height: 120upx;
	}
	.card-body .card-footer {
		padding:15upx 40upx;
		text-align: right;
		font-size: 24upx;
		color: #999;
	}
	.details {
		display: flex;
		justify-content: center;
		border:1upx solid #dfdfdf;
		border-radius:20upx;
		padding:10upx;
		margin:0 20upx;
		margin-bottom: 20upx;
	}
	.details-infos .iron-photo {
		width: 300upx;
		height: 300upx;
		margin-left: 15upx;
	}
	.details .details-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		line-height: 2;
	}
	.details-info {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.new-price {
		color: #007AFF;
	}
	.details-title {
		padding:8rpx 0;
		text-align:center;
		background:#dfdfdf;
		color:#323232;
		margin:20rpx 0;
	}
	.iron-contact {
		text-align: center;
	}
	.qrcodes {
		text-align: center;
	}
	.qrcodes .qrcode {
		width: 200rpx;
		height: 200rpx;
	}
	.iron-contact {
		text-align: center;
	}
	.qrcodes {
		text-align: center;
	}
	.qrcodes .qrcode {
		width: 200rpx;
		height: 200rpx;
	}
</style>
